/*
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-08-07 18:23:32
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-08-07 19:52:26
 * @FilePath: \mygit\个人网站\js\about.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


(function () {

    const numhtml = document.querySelector('#progress-bar .html h1')
    const htmlcolor = document.querySelector('#progress-bar .html .htmlcolor')
    const numphp = document.querySelector('#progress-bar .php h2')
    const phpcolor = document.querySelector('#progress-bar .php .phpcolor')
    const numcss = document.querySelector('#progress-bar .css h2')
    const csscolor = document.querySelector('#progress-bar .css .csscolor')
    const numcms = document.querySelector('#progress-bar .cms h2')
    const cmscolor = document.querySelector('#progress-bar .cms .cmscolor')
    const numjava = document.querySelector('#progress-bar .java h2')
    const javacolor = document.querySelector('#progress-bar .java .javacolor')
    const numphoto = document.querySelector('#progress-bar .photo h2')
    const photocolor = document.querySelector('#progress-bar .photo .photocolor')
    let timer
    const html = document.documentElement
    let number1 = 0
    let number2 = 0
    let number3 = 0
    let number4 = 0
    let number5 = 0
    let number6 = 0
    let is_running = false

    document.addEventListener('scroll', function () {
        if (html.scrollTop >= html.clientHeight) {
             //  console.log(111);
             progressStarthtml()
             progressStartphp()
             progressStartcss()
             progressStartcms()
             progressStartjava()
             progressStartphoto()
        }
    })


    // html
    function progressStarthtml() {
        // let number1 = 0
        timer = setInterval(function () {
            if (number1 < 100) {
                number1 += 1
                numhtml.innerHTML = number1 + "%"
                htmlcolor.style.width = number1 + "%"
            } else {
                clearInterval(timer)
            }
        }, 50);

    }
    // php
    function progressStartphp() {
        // let number2 = 0
        timer = setInterval(function () {
            if (number2 < 80) {
                number2 += 1
                numphp.innerHTML = number2 + "%"
                phpcolor.style.width = number2 + "%"
            } else {
                clearInterval(timer)
            }
        }, 62.5);

    }
    // css
    function progressStartcss() {
        // let number3 = 0
        timer = setInterval(function () {
            if (number3 < 60) {
                number3 += 1
                numcss.innerHTML = number3 + "%"
                csscolor.style.width = number3 + "%"
            }
        }, 83);

    }
    // cms
    function progressStartcms() {
        // let number4 = 0
        timer = setInterval(function () {
            if (number4 < 50) {
                number4 += 1
                numcms.innerHTML = number4 + "%"
                cmscolor.style.width = number4 + "%"
            }
        }, 100);

    }
    // java
    function progressStartjava() {
        // let number5 = 0
        timer = setInterval(function () {
            if (number5 < 80) {
                number5 += 1
                numjava.innerHTML = number5 + "%"
                javacolor.style.width = number5 + "%"
            }
        }, 62.5);

    }
    // photo
    function progressStartphoto() {
        // let number = 0
        timer = setInterval(function () {
            if (number6 < 70) {
                number6 += 1
                numphoto.innerHTML = number6 + "%"
                photocolor.style.width = number6 + "%"
            }
        }, 71.5);

    }
})();


